<template>
 <div class="wrap">
     <div class="play_wrap" id="player">
        <search-bar @bindMusicList="bindMusicList"></search-bar>
        <div class="center_con">
            <!-- 点击放歌 -->
            <music-list 
                  :musicList="musicList"
                  @commentBind="commentBind" 
                  @picBind="picBind"
                  @musicUrlBind="musicUrlBind"
                  @mvUrlBind="mvUrlBind"
                  @isShowMVBind="isShowMVBind">
            </music-list>
            <!-- 歌曲信息容器 -->
            <music-desc 
                  :picUrl="pic" 
                  :isPlaying="isPlaying">
            </music-desc>
            <!-- 评论容器 -->
            <music-comment :hotComments="comments"></music-comment>
        </div>
        <music-audio 
              :musicUrl="musicUrl"
              @isPlayingBind="isPlayingBind">
        </music-audio>
        <music-mv
              :mvUrl="mvUrl"
              :isShowMV="isShowMV">
        </music-mv>
     </div>
 </div>
</template>

<script>

import SearchBar from './SearchBar'
import MusicList from './MusicList.vue'
import MusicDesc from './MusicDesc.vue'
import MusicComment from './MusicComment.vue'
import MusicAudio from './MusicAudio'
import MusicMv from './MusicMv.vue'

 export default {
   data () {
     return {
       // 歌曲数组
       musicList: [],
       // 歌曲地址
       musicUrl: "",
       // 歌曲评论
       comments: [],
       // 歌曲海报
       pic: "",
       // 海报图片播放状态
       isPlaying: false,
       // MV地址
       mvUrl: "",
       // 是否显示MV遮罩层
       isShowMV: false
     }
   },
   components: {
       SearchBar,
       MusicList,
       MusicDesc,
       MusicComment,
       MusicAudio,
      MusicMv
   },
   methods: {
     bindMusicList(e) {
       this.musicList = e
     },
     musicUrlBind(e) {
       this.musicUrl = e
     },
     commentBind(e) {
       this.comments = e
     },
     picBind(e) {
       this.pic = e
     },
     isPlayingBind(e) {
       this.isPlaying = e
     },
     mvUrlBind(e) {
       this.mvUrl = e
     },
     isShowMVBind(e) {
       this.isShowMV = e
     }
   }
 }
</script>

<style>

 
</style>
